<template>
  <div class="app-container">
    <el-tabs type="border-card">
      <el-tab-pane label="学生信息">
        <el-form ref="form" :model="form" label-width="120px" style="width: 60%;">
          <el-form-item label="学生姓名">
            <el-input v-model="form.name" />
          </el-form-item>

          <el-form-item label="性别">
            <el-radio-group v-model="form.sex">
              <el-radio label="男" />
              <el-radio label="女" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="出生年月">
            <el-date-picker
              v-model="form.birthday"
              type="date"
              placeholder="选择日期"
              style="width: 100%;"
            />
          </el-form-item>
          <el-form-item label="家庭住址">
            <el-input v-model="form.adress" type="textarea" />
          </el-form-item>
          <el-form-item label="所属班级">
            <el-input v-model="form.className" />
            <!-- <el-select v-model="form.region" placeholder="please select your zone">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
            </el-select>-->
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="form.idNum" />
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input v-model="form.telNum" />
          </el-form-item>
          <el-form-item label="QQ">
            <el-input v-model="form.qq" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="家长信息">
        <el-form ref="form" :model="form" label-width="120px" style="width: 60%;">
          <el-form-item label="父亲姓名">
            <el-input v-model="form.fname" />
          </el-form-item>
          <el-form-item label="父亲身份证号">
            <el-input v-model="form.fIdNum" />
          </el-form-item>
          <el-form-item label="父亲电话号码">
            <el-input v-model="form.fTelNum" />
          </el-form-item>

          <el-form-item label="母亲姓名">
            <el-input v-model="form.mname" />
          </el-form-item>
          <el-form-item label="母亲身份证号">
            <el-input v-model="form.mIdNum" />
          </el-form-item>
          <el-form-item label="母亲电话号码">
            <el-input v-model="form.mTelNum" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="其他信息">
        <el-form ref="form" :model="form" label-width="120px" style="width: 60%;">
          <el-form-item label="其他特殊情况">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
              v-model="form.desc"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <el-button type="primary" @click="onSubmit" style="margin-top: 40px;">新建</el-button>
    <el-button @click="onCancel">取消</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',           //学生姓名
        sex: '',             //学生性别
        birthday: '',       //出生年月
        adress: '',         //家庭住址
        className: '',      //班级名称
        idNum: '',           //身份证号
        telNum: '',         //电话号码  
        qq: '',             //qq号
        fName: '',           //父亲姓名
        fIdNum: '',          //父亲身份证号
        fTelNum: '',         //父亲电话号码
        mName: '',           //母亲姓名
        mIdNum: '',          //母亲身份证号
        mTelNum: '',         //母亲电话号码
        desc: ''            //其他信息描述
      }
    }
  },
  methods: {
    onSubmit() {
      console.log(this.form)
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}
</style>

